<template>
  <div>
    <el-row>
      <el-col :span="24">
        <van-nav-bar
          title="用户服务协议"
          left-text="返回"
          left-arrow
          @click-left="onClickLeft"
        />
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24" id="service-content">
        <div v-html="serviceText"></div>
      </el-col>
    </el-row>
  </div>
</template>

<style scoped>
#service-content {
  padding: 20px;
  text-align: left;
  font-size: 16px;
}

#service-content h2 {
  font-size: 20px;
  margin-bottom: 10px;
}

#service-content h3 {
  font-size: 18px;
  margin-bottom: 10px;
}

#service-content p {
  margin-bottom: 10px;
}

#service-content ul {
  margin-bottom: 10px;
}

#service-content li {
  margin-bottom: 5px;
}
</style>

<script>
import {Toast} from "vant";

export default {

  data() {
    return {
      serviceText: `
        <h2>用户服务协议</h2>
        <p>欢迎使用我们的服务。本服务协议旨在向您说明我们在您使用我们的服务时如何收集、使用和保护您的个人信息。</p>
        <h3>1. 服务条款</h3>
        <p>您在使用我们的服务时，必须遵守以下条款：</p>
        <ul>
          <li>您必须遵守所有适用的法律法规。</li>
          <li>您不得使用我们的服务进行任何非法活动。</li>
        </ul>
        <h3>2. 服务内容</h3>
        <p>我们提供的服务包括但不限于：</p>
        <ul>
          <li>信息查询服务。</li>
          <li>在线咨询服务。</li>
        </ul>
        <h3>3. 用户权利</h3>
        <p>您享有以下权利：</p>
        <ul>
          <li>有权了解我们如何使用您的个人信息。</li>
          <li>有权要求我们更正或删除您的个人信息。</li>
        </ul>
        <h3>4. 用户义务</h3>
        <p>您必须履行以下义务：</p>
        <ul>
          <li>提供真实、准确、完整的个人信息。</li>
          <li>遵守我们的服务协议和使用规则。</li>
        </ul>
        <h3>5. 服务变更</h3>
        <p>我们保留随时修改服务条款的权利，修改后的服务条款将在网站上公布。</p>
      `
    };
  },
  methods: {
    onClickLeft() {
      Toast('返回');
      // 返回上一个页面
      this.$router.go(-1);
    }
  }
};
</script>
